<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>美兰数据文化馆与图书馆</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/huazhi/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/huazhi/css/public.css" media="all">
    <link rel="shortcut icon" href="<%=request.getContextPath()%>/huazhi/images/favicon.ico"/>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/huazhi/css/formSelects-v4.css" media="all">
</head>
<style>
    /* 底部固定区域 */
    .layui-layout-admin .layui-footer {
        padding: 10px 0;
        text-align: center;
    }

    .layui-layout-admin .layui-footer {
        background-color: #fff;
    }

    .layuiadmin-badge {
        position: absolute;
        top: 40%;
        margin-top: -9px;
        right: 15px;
    }

    li {
        list-style: decimal;
        counter-reset: sectioncounter;
        content: counter(sectioncounter) "、";
    }

</style>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-row layui-col-space10">

                <div class="layui-col-sm6">
                    <div class="layui-form">
                        <div class="layui-card-header" style="padding: 0 10px;">物品明细

                        </div>
                        <div class="layui-tab-content" style="height: auto">
                            <div class="layui-form-item" >
                                <div class="layui-col-xs11">
                                    <label class="layui-form-label">订单号</label>
                                    <div class="layui-input-block">
                                        <select name="orderNumber" id="orderNumber" lay-filter="test">

                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-col-lg12">
                                    <div class="layui-col-xs11">
                                        <label class="layui-form-label">物品名称</label>
                                        <div class="layui-input-block">
                                            <%--                                            <select name="suppliesName" lay-filter="suppliesName" id="suppliesName">--%>
                                            <%--                                                <option value="">请选择</option>--%>
                                            <%--                                            </select>--%>

                                            <div class="layui-form">
                                                <select name="suppliesName" id="suppliesName" xm-select="suppliesName"
                                                        xm-select-radio="" lay-verify="suppliesName"
                                                        xm-select-search="">
                                                    <%--                                                    <option value="1">北京</option>--%>
                                                    <%--                                                    <option value="2">上海</option>--%>
                                                    <%--                                                    <option value="3" selected="selected">广州</option>--%>
                                                    <%--                                                    <option value="4" selected="selected">深圳</option>--%>
                                                    <%--                                                    <option value="5" selected="selected">天津</option>--%>
                                                    <%--                                                    <option value="6" selected="selected">杭州</option>--%>
                                                </select>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="layui-col-xs1">
                                        <div class="layui-form-mid layui-word-aux"
                                             style="color: red !important;padding: 10px !important;">*
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-col-lg12">
                                    <div class="layui-col-xs11">
                                        <label class="layui-form-label">库存数量</label>
                                        <div class="layui-input-block">
                                            <input type="text"
                                                   autocomplete="off"
                                                   class="layui-input" disabled id="quantity">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-col-lg12">
                                    <div class="layui-col-xs11">
                                        <label class="layui-form-label">领取数量</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="inventory"
                                                   autocomplete="off" placeholder="请输入领取数量"
                                                   class="layui-input"
                                                   id="inventory" oninput="value=value.replace(/[^\d]+/g,'')"
                                                   maxlength="9" min="1">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-col-lg12" style="text-align: center">
                                    <button class="layui-btn layui-btn-xs layui-bg-blue" id="addSupplies">新增物品清单
                                    </button>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="layui-card-header" style="padding: 0 10px;">领用物品清单

                    </div>
                    <div class="layui-tab-content" style="height: auto">
                        <div class="layui-col-lg12">
                            <div class="layui-col-xs11">
                                <table class="layui-hide" id="collectRecordTable"
                                       lay-filter="collectRecordTables"></table>
                                <div id="laypage"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-sm6">
                    <div class="layui-card-header" style="padding: 0 10px;">其他信息
                    </div>
                    <form class="layui-form" lay-filter="component-form-element">
                        <div class="layui-tab-content" style="height: auto">
                            <div class="layui-form-item">
                                <div class="layui-col-lg12">
                                    <div class="layui-col-xs11">
                                        <label class="layui-form-label">物品用途</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="purpose"
                                                   autocomplete="off" placeholder="请输入物品用途(如：日常办公)"
                                                   class="layui-input" lay-verify="purpose">
                                        </div>
                                    </div>
                                    <div class="layui-col-xs1">
                                        <div class="layui-form-mid layui-word-aux"
                                             style="color: red !important;padding: 10px !important;">*
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-col-lg12">
                                    <div class="layui-col-xs11">
                                        <label class="layui-form-label">领用人</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="recipients"
                                                   autocomplete="off" placeholder="请输入领用人"
                                                   class="layui-input" lay-verify="recipients">
                                        </div>
                                    </div>
                                    <div class="layui-col-xs1">
                                        <div class="layui-form-mid layui-word-aux"
                                             style="color: red !important;padding: 10px !important;">*
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-col-lg12">
                                    <div class="layui-col-xs11">
                                        <label class="layui-form-label">领用时间</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="collectiontimestring" id="collectiontimestring"
                                                   autocomplete="off" placeholder="请输入领用时间"
                                                   class="layui-input" readonly="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-col-lg12">
                                    <div class="layui-col-xs11">
                                        <label class="layui-form-label">领用详情</label>
                                        <div class="layui-input-block">
                                    <textarea type="text" name="collectioninfo"
                                              autocomplete="off" placeholder="请输入领用详情"
                                              class="layui-textarea"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item layui-layout-admin">
                                <div class="layui-footer" style="left: 0;padding: 0px;">
                                    <button class="layui-btn" lay-submit lay-filter="*" id="pushButton">确认领取</button>
                                </div>
                            </div>

                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<input type="hidden" id="curnum" value="1">
<script type="text/html" id="table-inventory">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="<%=request.getContextPath()%>/huazhi/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="<%=request.getContextPath()%>/huazhi/lib/layui-v2.5.5/layui.all.js"></script>
<script src="<%=request.getContextPath()%>/huazhi/js/lay-config.js?v=1.0.4" charset="utf-8"></script>

<script>
    layui.use(['form', 'laydate', 'laypage', 'table', 'formSelects'], function () {
        var $ = layui.$
            , form = layui.form
            , laydate = layui.laydate
            , layer = layui.layer,
            laypage = layui.laypage,
            table = layui.table,
            formSelects = layui.formSelects;


        $.ajax({
            type: "post",
            url: "<%=request.getContextPath()%>/rest/supplies/getSuppliesRegisterListByState",
            dataType: "json",
            async: false,
            success: function (msg) {
                // var select = document.getElementById("suppliesName");
                // $.each(msg, function (i, n) {
                //     select.options.add(new Option(n.suppliesname, n.tid));
                // })
                // form.render('select');
                formSelects.data('suppliesName', 'local', {
                    arr: msg
                });


            }
        })



        $.ajax({
            type: "post",
            url: "<%=request.getContextPath()%>/rest/supplies/getNumberNo",
            dataType: "json",
            async: false,
            success: function (msg) {
                var select = document.getElementById("orderNumber");
                select.options.add(new Option(msg,msg));
                // $.each(data,function(i,n) {
                //     select.options.add(new Option(n.rolename,n.tid));
                // })
                form.render('select');

                var limitcount = 10;
                table.render({
                    elem: '#collectRecordTable'
                    , url: "<%=request.getContextPath()%>/rest/supplies/getListCollectRecord"
                    , title: "物品领用清单表",
                    height: 'full-450'
                    , page: false
                    // , toolbar: '#suppliesCollectOperation'
                    , limit: limitcount
                    , text: {
                        none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
                    },
                    where: {"random": msg},
                    skin: 'line',
                    defaultToolbar: ['filter', 'print']
                    // ,skin: 'line' //表格风格
                    , cols: [[
                        // {type: 'checkbox'}
                        {title: 'ID', width: 70, sort: true, fixed: 'left', type: 'numbers'}
                        , {field: 'suppliesname', title: '物品名称', sort: true}
                        , {field: 'quantity', title: '领用数量', sort: true}
                        , {title: '操作', toolbar: '#table-inventory', fixed: "right", align: "center", width: 200}
                    ]],
                    done: function (res, curr, count) {
                        var curnum = $("#curnum").val();
                        $('.layui-table-fixed-r').removeClass('layui-hide');//列固定右侧
                        laypage.render({
                            elem: 'laypage'
                            , first: '首页'
                            , last: '尾页'
                            , groups: 5
                            , count: count
                            , curr: curnum
                            , limit: limitcount
                            , layout: ['prev', 'page', 'next', 'skip', 'count', 'limit']
                            , limits: [10, 15, 20]
                            , jump: function (obj, first) {
                                if (!first) {
                                    curnum = obj.curr;
                                    $("#curnum").val(curnum)
                                    limitcount = obj.limit;
                                    table.reload('collectRecordTable', { //表格的id
                                        where: {
                                            page: curnum,
                                            limit: limitcount
                                        }
                                    })
                                }
                            }
                        })
                    }
                });

            }
        });

        $.ajax({
            type: "post",
            url: "<%=request.getContextPath()%>/rest/supplies/getNumberNos",
            dataType: "json",
            async: false,
            success: function (msg) {
                var select = document.getElementById("orderNumber");
                $.each(msg,function(i,n) {
                    select.options.add(new Option(n,n));
                })
                form.render('select');
            }
        });


        //清单
        form.on('select(test)', function(data){
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象
            $("#curnum").val("1");
            table.reload('collectRecordTable', { //表格的id
                where: {
                    random: data.value,
                    page: 1,
                    limit: 10,
                },
                text: {
                    none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
                }
            })


        });


        //监听工具条
        table.on('tool(collectRecordTables)', function (obj) {  //表格的lay-filter="userlists"
            var data = obj.data; //获得当前行所有数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if (obj.event === 'del') {
                del(data, obj)
            }
        });

        function del(data, obj) {
            layer.confirm('确定删除此数据', {icon: 3, title: '提示信息', shade: 0.6}, function (index) {
                layer.close(index);
                layer.msg('删除中，请稍候', {icon: 16, time: false, shade: 0.6});
                setTimeout(function () {
                    //向服务端发送删除指令
                    $.ajax({
                        type: "post",
                        url: "<%=request.getContextPath()%>/rest/supplies/deleteCollectRecord",
                        data: "tid=" + data.tid,
                        dataType: "json",
                        async: false,
                        success: function (msg) {
                            layer.close(index);
                            if (msg.data == true) {
                                layer.msg('删除成功');
                                var yyy=formSelects.value('suppliesName', 'valStr');

                                if(yyy==""){

                                }else {
                                    $("#quantity").val( msg.count);
                                 }

                                obj.del();
                            } else {
                                layer.msg(msg.errorMsg);
                            }
                        }
                    })
                }, 2000);
            });
        }

        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var date = date.getDate();
        var now = year + '-' + p(month) + "-" + p(date);

        function p(s) {
            return s < 10 ? '0' + s : s;
        }

        laydate.render({
            elem: "#collectiontimestring",
            btns: ['now', 'confirm'],
            theme: 'molv',
            value: now,
            calendar: true
        });


        $("#addSupplies").click(function () {
            var suppliesTid = formSelects.value('suppliesName', 'valStr');
            // var suppliesTid = $("#suppliesName").val()
            if (suppliesTid == "") {
                $(".xm-hide-input").addClass("layui-form-danger");
                $(".xm-hide-input").focus();
                layer.msg('请选择物品名称', {icon: 5, shift: 6});
            } else {
                var inventory = $("#inventory").val()
                if (inventory == "") {
                    var numbersId = document.getElementById("inventory");
                    numbersId.setAttribute("class", "layui-input layui-form-danger");
                    numbersId.focus();
                    layer.msg('请输入领取数量', {icon: 5, shift: 6});
                } else {
                    var quantity = $("#quantity").val();
                    var random1 = $("#orderNumber").val();

                    if (quantity == 0) {
                        layer.msg('库存数量已用完', {icon: 5, shift: 6});
                    } else {
                        if (parseInt(inventory) == 0) {
                            var numbersId = document.getElementById("inventory");
                            numbersId.setAttribute("class", "layui-input layui-form-danger");
                            numbersId.focus();
                            layer.msg('请输入领取数量', {icon: 5, shift: 6});
                        } else {
                            if (parseInt(quantity) >= parseInt(inventory)) {
                                $.ajax({
                                    type: "post",
                                    url: "<%=request.getContextPath()%>/rest/supplies/addSuppliesCollectRecord",
                                    dataType: "json",
                                    async: false,
                                    data: "suppliesTid=" + suppliesTid + "&inventory=" + inventory + "&random=" + random1,
                                    success: function (msg) {
                                        if (msg = true) {
                                            layer.msg('添加成功');
                                            $("#quantity").val("");
                                            $("#inventory").val("")
                                            // $("#suppliesName").val("");
                                            // form.render('select');
                                            formSelects.value('suppliesName', []);
                                            $("#curnum").val("1");
                                            table.reload('collectRecordTable', { //表格的id
                                                where: {
                                                    random: random1,
                                                    page: 1,
                                                    limit: 10,
                                                },
                                                text: {
                                                    none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
                                                }
                                            })
                                        } else {
                                            layer.msg(msg.errorMsg);
                                        }
                                    }
                                })
                            } else {
                                layer.msg('领取数量大于库存数量,请重新输入领取数量', {icon: 5, shift: 6});
                            }
                        }
                    }
                }
            }

        });


        formSelects.on('suppliesName', function (id, vals, val, isAdd, isDisabled) {
            //id:           点击select的id
            //vals:         当前select已选中的值
            //val:          当前select点击的值
            //isAdd:        当前操作选中or取消
            //isDisabled:   当前选项是否是disabled
            // alert("选择了: " + val.value);
            // alert("选择了: " + isAdd);
            if (val.value == "") {
                $("#quantity").val("");
            } else {
                if (isAdd) {
                    $.ajax({
                        type: "post",
                        url: "<%=request.getContextPath()%>/rest/supplies/getSuppliesRegisterByTid",
                        dataType: "json",
                        data: "tid=" + val.value,
                        async: false,
                        success: function (msg) {
                            var quantity = msg.quantity;
                            $("#quantity").val(quantity);
                            <%--$.ajax({--%>
                            <%--    type: "post",--%>
                            <%--    url: "<%=request.getContextPath()%>/rest/supplies/getCollectRecordBySuppliesTidAndRandom",--%>
                            <%--    dataType: "json",--%>
                            <%--    data: "suppliestid=" + val.value,--%>
                            <%--    async: false,--%>
                            <%--    success: function (obj) {--%>
                            <%--        $("#quantity").val(parseInt(quantity) - parseInt(obj));--%>
                            <%--    }--%>
                            <%--})--%>
                        }
                    })
                } else {
                    $("#quantity").val("");
                }
            }

            //如果return false, 那么将取消本次操作
        });


        //自定义验证规则
        form.verify({
            purpose: function (value, item) {
                if (value == "") {
                    return '请输入物品用途';
                }
            },
            recipients: function (value, item) {
                if (value == "") {
                    return '请输入领用人';
                }
            }
        });

        form.on('submit(*)', function (data) {
            console.log(data); //得到select原始DOM对象
            var field = data.field//当前容器的全部表单字段，名值对形式：{name: value}
            var flag = true;
            var random1 = $("#orderNumber").val();
            field.random=random1;
            $.ajax({
                type: "post",
                url: "<%=request.getContextPath()%>/rest/supplies/getCollectRecordByRandom",
                dataType: "json",
                data: "random=" + random1,
                async: false,
                success: function (obj) {
                    flag = obj;
                }
            })
            if (flag) {
                layer.msg('请添加领用物品清单', {icon: 5, shift: 6});
            } else {
                var index = layer.msg('数据提交中，请稍候', {icon: 16, time: false, shade: 0.6});
                $("#pushButton").addClass("layui-btn layui-btn-disabled").prop("disabled", true);
                $.ajax({
                    type: "post",
                    url: "<%=request.getContextPath()%>/rest/supplies/addCollect",
                    data: field,
                    dataType: "json",
                    async: false,
                    success: function (obj) {
                        setTimeout(function () {
                            layer.close(index);
                            if (obj = true) {
                                layer.msg('领取成功');
                            } else {
                                layer.msg(obj.errorMsg);
                            }
                        }, 2000);
                        setTimeout(function () {
                            var indexs = parent.layer.getFrameIndex(window.name);//获取当前弹出层的层级
                            parent.layer.close(indexs);//关闭弹出层
//                        window.parent.location.reload();//刷新父页面
                        }, 4000);
                    }
                })
            }
            return false;
        });


    });
</script>
</body>
</html>